<template lang="pug">
  Modal(v-model="createModal" title="新建客户" width="800")
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100")
      Row(type="flex" justify="start" :gutter="16")
        Col(span="12")
          FormItem(label="客户来源：" prop="source")
            Select(v-model="formValidate.sourceId" :label-in-value="true"  placeholder="请选择" clearable @on-change="sourceChange")
              Option(v-for="(item, index) in customerSourceArr" :value="item.value" :key="index") {{ item.text }}
        Col(span="12")
          FormItem(label="客户名称：" prop="name")
            Input(v-model="formValidate.name")
        Col(span="12")
          FormItem(label="企业性质：" prop="character")
            Select(v-model="formValidate.character" :label-in-value="true"  placeholder="请选择" clearable @on-change="characterChange")
              Option(v-for="(item, index) in characterArr" :value="item.key" :key="index") {{ item.value }}
        Col(span="12")
          FormItem(label="企业规模：" prop="size")
            Select(v-model="formValidate.size" :label-in-value="true"  placeholder="请选择" clearable)
              Option(v-for="(item, index) in sizeArr" :value="item.key" :key="index") {{ item.value }}
        Col(span="12")
          FormItem(label="所属行业：" prop="businessType")
            Select(v-model="formValidate.businessType" :label-in-value="true"  placeholder="请选择" clearable @on-change="businessTypeChange")
              Option(v-for="(item, index) in customerBusinesstype_arr" :value="item.key" :key="index") {{ item.value }}
        Col(span="12")
          FormItem(label="注册资本：" prop="registerCapital")
            Input.unit-input(v-model="formValidate.registerCapital" type="number")
            span.unit 万元
        Col(span="12")
          FormItem(label="客户地址：" prop="address")
            Input(v-model="formValidate.address")
        Col(span="12")
          FormItem(label="客户网址：" prop="webSize")
            Input(v-model="formValidate.webSite")
        Col(span="12")
          FormItem(label="公司电话：" prop="phone")
            Input(v-model="formValidate.phone")
        Col(span="12")
          FormItem(label="联系人姓名：" prop="contacterName")
            Input(v-model="formValidate.contacterName")
        Col(span="12")
          FormItem(label="联系人电话：" prop="contacterPhone")
            Input(v-model="formValidate.contacterPhone")
        Col(span="24")
          FormItem(label="公司简介：" prop="description")
            Input(v-model="formValidate.description" type="textarea")
    template(slot="footer")
      Button(@click="createModal = false") 取消
      Button(type="info" @click="handleSubmit('formValidate')") 保存
    Modal(v-model="successModal" :closable="false" :mask-closable="false")
      p 保存成功，是否填写客户联系人？
      template(slot="footer")
        Button(@click="dontGo") 否
        Button(type="info" @click="goTo") 是
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'

export default {
  props: {
    customerBusinesstype_arr: Array,
    sizeArr: Array,
    characterArr: Array,
    customerSourceArr: Array
  },
  data () {
    return {
      createModal: false,
      successModal: false,
      customerId: '', // 新建客户的id
      formValidate: {
        name: '',
        source: '',
        sourceId: '',
        businessType: '',
        businessTypeName: '',
        character: '',
        characterName: '',
        size: '',
        registerCapital: '',
        address: '',
        webSite: '',
        phone: '',
        contacterName: '',
        contacterPhone: '',
        // contacter: {
        //   name: '',
        //   phone: '',
        // },
        description: ''
      },
      ruleValidate: {
        sourceId: [
          { required: true, message: '客户来源不能为空', trigger: 'change' }
        ],
        name: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' }
        ],
        businessType: [
          { required: true, message: '所属行业不能为空', trigger: 'change' }
        ],
        character: [
          { required: true, message: '企业性质不能为空', trigger: 'change' }
        ],
        size: [
          { required: true, message: '企业规模不能为空', trigger: 'change' }
        ],
        registerCapital: [
          { required: true, message: '注册资本不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '客户地址不能为空', trigger: 'blur' }
        ],
        contacterName: [
          { required: true, message: '联系人姓名不能为空', trigger: 'blur' }
        ],
        contacterPhone: [
          { required: true, message: '联系人电话不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '公司简介不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    creatOpen () {
      this.formValidate = {
        name: '',
        source: '',
        sourceId: '',
        businessType: '',
        businessTypeName: '',
        character: '',
        characterName: '',
        size: '',
        registerCapital: '',
        address: '',
        webSite: '',
        phone: '',
        description: ''
      }
      this.createModal = true
    },
    chooseTab () {

    },
    sourceChange (val) {
      console.log(val)
      this.formValidate.source = val.label
    },
    // 保存按钮
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.createCoustomer()
        } else {
          this.$Message.warning('有必填项未填!')
        }
      })
    },
    dontGo () {
      this.successModal = false
      this.createModal = false
      this.formValidate = {
        name: '',
        source: '',
        sourceId: '',
        businessType: '',
        businessTypeName: '',
        character: '',
        characterName: '',
        size: '',
        registerCapital: '',
        address: '',
        webSite: '',
        phone: '',
        description: ''
      }
      this.$refs['formValidate'].resetFields()
      this.$emit('get-list')
    },
    goTo () {
      this.formValidate = {
        name: '',
        source: '',
        sourceId: '',
        businessType: '',
        businessTypeName: '',
        character: '',
        characterName: '',
        size: '',
        registerCapital: '',
        address: '',
        webSite: '',
        phone: '',
        description: ''
      }
      this.$refs['formValidate'].resetFields()
      this.successModal = false
      this.createModal = false
      this.$router.push({ name: 'h-c-detail', query: { id: this.customerId, isCreate: true } })
    },
    // 新建客户
    createCoustomer () {
      // this.formValidate.registerCapital = this.formValidate.registerCapital + '万元'
      this.formValidate.registerCapital = this.formValidate.registerCapital
      this.formValidate.contacter = {
        name: this.formValidate.contacterName,
        phone: this.formValidate.contacterPhone
      }
      HRDCCustomerApi.PostCustomer(this.formValidate).then(res => {
        if (res.data.success) {
          this.customerId = res.data.data.id
          this.successModal = true
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 所属行业选择
    businessTypeChange (val) {
      if (val) {
        this.formValidate.businessTypeName = val.label
      }
    },
    characterChange (val) {
      if (val) {
        this.formValidate.characterName = val.label
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .unit-input{
    padding-right: 40px;
  }
  span.unit{
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
